<!--  -->
<template>
  <div class="arrange">
    <div class="doc-footer">
      <el-button type="info" @click="goback">返 回</el-button>
      <el-button type="primary" v-print="'#rootDiv'">打印目录</el-button>
      <el-button type="success" v-print="'#stripBox'">打印脊背条</el-button>
      <el-button type="danger" @click="sureComplete">确定整理完成</el-button>
    </div>
    <div :style="{ height: aheight + 'px' }" class="arrange-content">
      <div
        class="strip-box"
        id="stripBox"
        style="width: 4cm; height: 25cm"
        v-if="spinalStrip"
      >
        <div style="text-align: center; padding: 4px 0">
          <p
            style="
              width: 30px;
              height: 220px;
              display: inline-block;
              padding: 10px 3px;
              font-size: 22px;
              font-weight: bold;
            "
          >
            {{ spinalStrip.hospitalName }}
          </p>
        </div>
        <div>
          <p>全宗号</p>
          <p style="height: 90px"></p>
        </div>
        <div>
          <p>年度</p>
          <p style="height: 70px">{{ spinalStrip.years }}</p>
        </div>
        <div>
          <p>保管期限</p>
          <p>{{ spinalStrip.term }}</p>
        </div>
        <div>
          <p>类别</p>
          <p>{{ spinalStrip.mainType }}</p>
          <p>({{ spinalStrip.childType }})</p>
        </div>
        <div>
          <p>盒号</p>
          <p>({{ spinalStrip.storageLocation }})</p>
        </div>
        <div>
          <p>卷号</p>
          <p>({{ spinalStrip.fileNumberRange }})</p>
        </div>
      </div>
      <div class="rootDiv" id="rootDiv" style="width: 27cm">
        <h2>归档文件目录</h2>
        <el-table v-loading="loading" :data="list" border>
          <el-table-column
            label="序号"
            prop="fileNumber"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column
            label="姓名"
            prop="name"
            align="center"
            width="110"
          ></el-table-column>
          <el-table-column
            label="身份证号"
            prop="idCard"
            align="center"
            width="190"
          >
          </el-table-column>
          <el-table-column
            label="类别"
            prop="reimbursementType"
            align="center"
            width=""
          ></el-table-column>
          <el-table-column
            label="文件题名"
            prop="fileTitle"
            align="center"
            width=""
          ></el-table-column>
          <el-table-column
            label="办理日期"
            prop="collectionTime"
            align="center"
            width="120"
          ></el-table-column>
          <el-table-column
            label="总费用"
            prop="totalCost"
            align="center"
            width="120"
          ></el-table-column>
          <el-table-column
            label="统筹支付"
            prop="coordinatedPayment"
            align="center"
            width="120"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { documentation, confirmOrga } from "@/api/files/basics";
import print from "vue-print-nb";
export default {
  props: ["ids"],
  directives: { print },
  data() {
    return {
      list: [],
      spinalStrip: null,
      loading: false,
      aheight: 0,
    };
  },
  computed: {},
  watch: {
    ids: {
      handler() {
        this.getDocumentation();
      },
      immediate: true,
    },
  },
  //方法集合
  methods: {
    getDocumentation() {
      let params = {
        ids: this.ids,
      };
      documentation(params).then((res) => {
        if (res.code == 200) {
          this.list = res.data.list;
          this.spinalStrip = res.data.spinalStrip;
          console.log(this.spinalStrip);
        }
      });
    },
    goback() {
      this.$emit("goback");
    },
    sureComplete() {
      let that = this;
      that.$modal
        .confirm(
          "请确认是否已打印脊背条、目录，请确保已打印以上内容后再执行确认操作？"
        )
        .then(function () {
          let data = that.list;
          confirmOrga(data).then((res) => {
            if (res.code == 200) {
              that.$message.success("整理完成");
              that.goback();
            }
          });
        })
        .catch(() => {});
    },
    async updateAdd() {
      let h =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //浏览器高度
      let topH = 0;
      let tableHeight = h - topH - 100;
      this.aheight = tableHeight;
      await this.$nextTick();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.updateAdd();
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.updateAdd();
        _this.resizeFlag = null;
      }, 100);
    };
    this.getDocumentation();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.doc-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.arrange {
  padding: 10px;
  h2 {
    font-size: 20px;
    padding: 0;
    margin: 0;
    text-align: center;
    letter-spacing: 10px;
    margin-bottom: 10px;
  }
  &-content {
    display: flex;
    overflow-y: scroll;
  }
}
.strip-box {
  border: 1px solid #000;
  > div {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
    > p {
      font-size: 18px;
      color: 0;
      padding: 4px 0;
      margin: 0;

      &:nth-child(1) {
        letter-spacing: 16px;
        font-weight: 200;
      }
      &:nth-child(2) {
        margin-top: 10px;
        line-height: 32px;
      }
    }
  }
}
</style>
<style lang="scss">
@media print {
  @page {
    //size: landscape;
    margin-bottom: 0;
  }

  .el-table--group,
  .el-table--border {
    border: 1px solid #000 !important;
  }
  .el-table--medium .el-table__cell {
    border: 1px solid #000 !important;
    padding: 0px 0;
  }
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid #000 !important;
  }
  .el-table--border .el-table__cell {
    border-bottom: 1px solid #000 !important;
  }
  .el-table--group,
  .el-table--border {
    border: 1px solid #000 !important;
  }
  .el-table--border {
    border-right: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
  }
  .el-table .cell {
    font-size: 16px;
    font-weight: 600;
  }
  body,
  html {
    height: auto !important;
  }
  .rootDiv h2 {
    font-size: 20px;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
    letter-spacing: 10px;
  }
}
</style>